<template>
    <div class="box" @keyup="co">
        <div class="con">
            <div class="logo">
                <svg t="1646539025400" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2252">
                    <path d="M836.608 675.84q41.984 59.392 96.256 76.8-23.552 72.704-74.752 151.552-78.848 118.784-155.648 118.784-28.672 0-84.992-19.456-52.224-19.456-91.136-19.456t-86.016 20.48q-49.152 19.456-80.896 19.456-92.16 0-181.248-156.672-89.088-154.624-89.088-304.128 0-138.24 67.584-226.304 69.632-88.064 172.032-88.064 22.528 0 50.176 5.632t57.344 20.992q31.744 17.408 52.224 24.064t31.744 6.656q13.312 0 40.96-6.144t55.296-22.528q29.696-16.384 51.2-24.576t44.032-8.192q71.68 0 129.024 38.912 30.72 20.48 62.464 60.416-47.104 40.96-68.608 71.68-39.936 57.344-39.936 124.928 0 74.752 41.984 135.168z m-205.824-478.208q-35.84 33.792-65.536 44.032-10.24 3.072-26.112 5.632t-36.352 4.608q1.024-90.112 47.104-155.648T701.44 6.144q2.048 10.24 3.072 14.336v11.264q0 36.864-17.408 82.944-18.432 45.056-56.32 82.944z" fill="#ffffff" p-id="2253"></path>
                </svg>
            </div>
            <div class="progress-bar">
                <div class="bar" :style="{width:count+'%'}"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { full } from '@/tool'
import { onMounted, onUnmounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useMessage } from 'naive-ui'
const message = useMessage()
const route = useRoute()
onMounted(() => {
    if (route.params.q == 'true') {
        full()
    } else {
        if (route.name != 'Home') {
            message.success('点击F11即可全屏')
        }
    }
})
var count = ref(0)
var counter = setInterval(() => count.value++, 14830) //1000 will  run it every 1 second
onUnmounted(() => {
    clearInterval(counter)
})
const co = () => {
    console.log(123)
}
document.onkeydown = (e) => {
    //对整个页面监听
    var keyNum = window.event ? e.keyCode : e.which
    if (keyNum == 40) {
        count.value--
    } else if (keyNum == 38) {
        count.value++
    }
}
</script>

<style lang="scss" scoped>
.box {
    cursor: none;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}
.con {
    display: flex;
    flex-direction: column;
    align-items: center;
    .logo{
        height: 90px;
        width: 90px;
        position: relative;
        svg{
            height: 100%;
            width: 100%;
        }
    }
    .progress-bar {
        margin-top: 60px;
        border-radius: 4px;
        height: 8px;
        width: 220px;
        position: relative;
        overflow: hidden;
        .bar {
            transition: width 0.2s;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #fff;
            border-radius: 4px;
            height: 100%;
            width: 2%;
        }
    }
}
</style>